﻿<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HH_WeChatClient</title>

    <!-- Bootstrap -->
    <link href="bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
        .cover {
            position: fixed;
            top: 0px;
            right: 0px;
            bottom: 0px;
            filter: alpha(opacity=88);
            background-color: #333;
            z-index: 1002;
            left: 0px;
            display: none;
            opacity: 0.88;
            -moz-opacity: 0.88;
        }
    </style>
  </head>
  <body ng-app="al-app">

<!-- HAVENT BODY OP -->
<div class="container-fluid"  ng-controller="article-list-page">

<!-- 遮罩层 -->
<div id="cover" class="cover">
    <div class="progress progress-striped active" style="width: 300px; margin: 0 auto; margin-top: 200px;">
        <div class="bar  center-block" style="width: 0%;"></div>
    </div>
</div>


	<div class="row-fluid">
		<div class="span12">
			<div class="row-fluid">

                <!-- class="span6" -->
				<div class="span12">

				    <div class="row-fluid">
						<div class="span12">
							<h3 style="display:none;">{{account.Name}}</h3>
							<dl>
								<dt>{{account.Introduction}}</dt>
							</dl>
						</div>

						<div class="span12" style="text-align: right;">
                            <button id="RefreshFast" class="btn btn-info btn-check-login" type="button" ng-show="false" ng-click="getArticleList(true)">{{btnLoginFastText}}</button>
                            <button id="Refresh" class="btn btn-info btn-check-login" type="button" ng-show="false" ng-click="getArticleList(false)">{{btnLoginText}}</button>
						</div>
					</div>

                    <!!-- 文章列表 -->
		            <div class="span12" ng-repeat="article in articles">
			            <div class="row-fluid">
				            <div class="span4">
					            <img class="img-rounded" alt="140x140" src="{{article.ArticlePictureURL}}" />
				            </div>
				            <div class="span8">
					            <div class="row-fluid">
						            <div class="span12">
							            <h5>
								            <a href="javascript:;" ng-click="getArticle(article.Title, article.ArticleURL);" >{{article.Title}}</a>
							            </h5>
							            <dl>
								            <dd>{{article.Summary}}</dd>
							            </dl>
						            </div>
					            </div>
					            <div class="row-fluid">
						            <div class="span12" style="text-align: right;">
							                <span class="label" style="float:left;">{{article.ArticleCreated | date : 'yyyy-MM-dd'}}</span> <span class="label">阅读: {{article.ReadingCount}}</span> <span class="label">赞: {{article.PraiseCount}}</span>
						            </div>
					            </div>
				            </div>
			            </div>
		            </div>


                    <!-- 分页 -->
				    <div class="row-fluid">
						<div class="span12" style="text-align: right; display: none;">
                            <button class="btn btn-info btn-check-login" type="button" ng-hide="page < 2" ng-click="goPage(true, -1)">上一页</button> <span style="padding: 10px;">{{page}}</span>
                            <button class="btn btn-info btn-check-login" type="button" ng-click="goPage(true, 1)">下一页</button>
						</div>
					</div>
				</div>


				<div class="span6" style="display:none;">

                    <!-- 文章正文 -->
	                <div class="row-fluid">
		                <div class="span12">
			                <h3>{{article.Title}}</h3>
			                <p>
				                {{article.Content}}
			                </p>
		                </div>
	                </div>

				</div>

			</div>
		</div>
	</div>



</div>
<!-- HAVENT BODY ED -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="jquery/1.11.0/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <script src="angular/1.2.16/angular.js"></script>
    <script src="angular/1.2.16/angular-route.js"></script>
    <script src="angular/1.2.16/angular-animate.js"></script>

<!-- HAVENT Script OP -->
<script type="text/javascript">
var isLoading = true;

var app = angular.module('al-app', ['ngRoute', 'ngAnimate'], function () {
	//console.log('al-app homeModule init');
	});
app.controller('article-list-page', function ($scope) {
    //console.log('controller: home-page init');
	
    $scope.account = { Name: '', Introduction: '' };
    $scope.article = { Title: '', Content: '' };
	$scope.articles = [];
	$scope.btnLoginText = '刷新统计';
	$scope.btnLoginFastText = '快速刷新';
	$scope.page = 1;


    // 翻页
	$scope.goPage = function (isFast, page) {
	    $scope.page += page;
	    $scope.getArticleList(isFast);
	};

    // 获取文章列表
	$scope.getArticleList = function (isFast) {
	    loading_start();

	    if (isLoading) $scope.page = 1;

	    if (isFast) {
	        $scope.btnLoginFastText = '刷新中...';
	    } else {
	        $scope.btnLoginText = '刷新中...';
	    }

	    var result = window.external.GetArticleList($scope.page);
	    result = eval('(' + result + ')');

	    //alert(result.message);
		if (result.error) {
		    //alert(result.message);
		} else {

		    //$scope.$apply(function () {

		    $scope.articles = result.data;
		    $scope.account = result.account;

		    //});

		    if (!isFast) {
		        // 遍历文章列表查询统计数据
		        $.each($scope.articles, function (index, value) {
		            var result = window.external.GetArticleCount(value.ArticleId);
		            result = eval('(' + result + ')');

		            if (result.error) {
		                alert(result.message);
		            } else {
		                $scope.articles[index].ReadingCount = result.data.ReadingCount;
		                $scope.articles[index].PraiseCount = result.data.PraiseCount;
		            }
		        });
		    }

		}

		if (isFast) {
		    $scope.btnLoginFastText = '快速刷新';
		} else {
		    $scope.btnLoginText = '刷新统计';
		}

		isLoading = false;
		loading_complete();
	};

    // 获取文章正文
	$scope.getArticle = function(title, articleUrl){
	    var result = window.external.GetArticle(title, articleUrl);
	    result = eval('(' + result + ')');
	    if (result.error) {
	        alert(result.message);
	    } else {
	        $scope.article = result.data;
	    }
	};


    // 初始化加载
    //$scope.getArticleList(true, 1);
	//refresh();

});


function refresh() {
    //alert(1);
    isLoading = true;
    $('#RefreshFast').trigger('click');
    //alert(2);
}



var interval = 0;
function loading_start() {
    if (interval) {
        clearInterval(interval);
    }

    $('body').css("overflow", "hidden")
    //$("#cover .bar").css('width', 0);
    //$("#cover").show();

    var percent = 0;
    interval = setInterval(function () {
        percent += 2;
        if (percent == 100) {
            percent = 99;
        }
        if (percent < 100) {
            $("#cover .bar").animate({ 'width': percent + '%' }, 'slow');
        }
    }, 300);
}
function loading_complete() {
    $("#cover .bar").animate({ 'width': '100%' }, 'fast');
    clearInterval(interval);
    setTimeout(function() {
        $("#cover").fadeOut("slow");
        $('body').css("overflow", "auto");
    }, 200);
}
</script>
<!-- HAVENT Script ED -->


  </body>
</html>

